<template>
    <div id="constantCategory">
        <div class="crumbs">
            <!--导航栏-->
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/welcome">
                    <i class="iconfont icon-home nav-icon"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item class="no-active">常数类别管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!--查询表单-->
            <el-form :inline="true" size="mini" :model="query" class="demo-form-inline">
                <el-form-item label="常数项编码">
                    <el-input v-model="query.constantCode" placeholder="常数项编码"></el-input>
                </el-form-item>
                <el-form-item label="常数项名称">
                    <el-input v-model="query.constantName" placeholder="常数项名称"></el-input>
                </el-form-item>
                <el-form-item label="常数项类别">
                    <el-select v-model="query.constantType" placeholder="常数项类别" clearable filterable>
                        <el-option v-for="type of constantTypes" :label="type.constantType" :value="type.constantType"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="pageSearchHandler">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="addPageHandler">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <div class="container table">
            <el-table :data="tableData" border stripe class="table_td">
                <el-table-column prop="id" label="主键编号"></el-table-column>
                <el-table-column prop="constantCode" label="常数项编码"></el-table-column>
                <el-table-column prop="constantName" label="常数项名称"></el-table-column>
                <el-table-column prop="constantType" label="常数项类别"></el-table-column>
                <el-table-column prop="createTime" label="操作时间"></el-table-column>
                <el-table-column width="140px" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="editPageBtnHandler(scope.row)"><i class="el-icon-edit"></i>编辑</el-button>
                        <el-button type="text" size="small" @click="delBtnHandler(scope.row)"><i class="el-icon-delete"></i>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="table_page">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        small
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="pageIndexHandler">
                </el-pagination>
            </div>
        </div>
        <!--添加的对话框-->
        <div class="dialog">
            <el-dialog title="常数类别操作" :visible.sync="dialogVisible">
                <el-form size="mini" :model="form" :rules="rules" ref="ruleForm" label-width="120px">
                    <el-form-item label="常数项名称" prop="constantName">
                        <el-input v-model="form.constantName" placeholder="常数项名称"></el-input>
                    </el-form-item>
                    <el-form-item label="常数项类别" prop="constantType">
                        <el-input v-model="form.constantType" placeholder="常数项类别"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="info" native-type="reset" icon="el-icon-refresh-right" >重置</el-button>
                        <el-button v-if="isEditPage" type="success" icon="el-icon-edit" @click="editBtnHandler">编辑</el-button>
                        <el-button v-else type="success" icon="el-icon-plus" @click="addBtnHandler">添加</el-button>
                        <el-button type="primary" icon="el-icon-close" @click="dialogVisible=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ConstantCategory',
        data(){
            return {
                query:{
                    constantCode:'', //编码
                    constantName:'', //名称
                    constantType:'', //类别
                    pageIndex:1, //页码
                    pageSize:10 //每页显示的条数
                },
                form:{
                    id:'',//主键ID
                    constantName:'', //名称
                    constantType:'' //类别
                },
                pageTotal:0, //总条数
                tableData: [], //表格数据
                constantTypes:[], //查询的所有常数类别
                dialogVisible:false, //对话框显示标识
                isEditPage:false,//是否是为编辑页面
                rules:{
                    constantName :[{ required: true, message: '请输入常数项名称', trigger: 'blur' }],
                    constantType :[{ required: true, message: '请输入常数项类别', trigger: 'blur' }]
                }
            }
        },
        methods:{
            //分页查询
            pageSearchHandler(){
                this.$api.constant.page(this.query).then(res=>{
                    this.tableData = res.data;
                    this.pageTotal = res.total;
                });
            },
            //点击页码查询
            pageIndexHandler(index){
                this.query.pageIndex = index;
                this.pageSearchHandler();
            },
            //获取所有查询的常数类别类型
            listConstantType(){
                this.$api.constant.listConstantType().then(res=>{
                    this.constantTypes = res.data;
                });
            },
            //显示添加弹出层
            addPageHandler(){
                this.form = {constantCode:'',constantName:'', constantType:''};
                this.isEditPage = false;
                this.dialogVisible = true
            },
            //添加
            addBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.constant.saveConstantCategory(this.form).then(res=>{
                            if(res.code === 200){
                                //关闭添加的弹出层
                                this.dialogVisible = false;
                                //加载列表
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    } else {
                        this.$message.error('请输入必填项信息');
                        return false;
                    }
                });
            },
            //删除
            delBtnHandler(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '删除提示', { type: 'warning'}).then(() => {
                    this.$api.constant.delById(row.id).then(res=>{
                        if(res.code === 200){
                            //重新加载列表
                            this.pageSearchHandler();
                            this.$message.success(res.msg);
                        }
                    });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            //显示修改页面
            editPageBtnHandler(row){
                this.form.id = row.id;
                this.form.constantCode = row.constantCode;
                this.form.constantName = row.constantName;
                this.form.constantType = row.constantType;
                this.dialogVisible= true;
                this.isEditPage = true;
            },
            editBtnHandler(){
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.$api.constant.editById(this.form).then(res=>{
                            if(res.code===200){
                                this.dialogVisible=false;
                                this.pageSearchHandler();
                                this.$message.success(res.msg);
                            }
                        });
                    } else {
                        this.$message.error('请输入必填项信息');
                        return false;
                    }
                });
            }
        },
        mounted() {
            this.pageSearchHandler();
            this.listConstantType();
        }
    };
</script>

<!--scope 属性是局部修改，去掉全局修改-->
<style>
    .table{margin-top: 5px; position: relative;padding-bottom:65px}
    .table_page{margin: 10px 0 10px 0; position: absolute; right: 25px}
    .el-table__row>td{padding: 0 !important;}
    .dialog .el-select{width: 100% !important;}
    .dialog .el-form{margin-right: 50px;}
</style>